<template>
	<view>
		<view class="step">
			<u-steps :current="cuNum" dot active-color="#FFBC00">
				<u-steps-item v-for="(item,index) in topicList" :key="index" :title="item.title"
					:desc="'('+(item.title=='单选题'?singleNum:item.title=='多选题'?multipleNum:estimate)+'/'+item.sum+')'">
				</u-steps-item>
				<!-- 	<u-steps-item title="多选题" v-if="multipleChoice!=0" :desc="'('+multipleNum+'/'+multipleChoice+')'">
				</u-steps-item> -->
				<!-- <u-steps-item title="判断题" v-if="estimateChoice!=0" :desc="'('+estimate+'/'+estimateChoice+')'">
				</u-steps-item> -->
			</u-steps>
		</view>
		<view class="topic">
			<view>
				<text style='color:#FFBC00'>
					{{cuNum == 0?'一':cuNum == 1?'二':'三'}}、{{textType == 1?'单选':textType == 2?"多选":'判断'}}</text>
				<text class="topic_right">
					<image src="@/static/study/testTime.png" class='topic_img' alt=""></image>
						<text class='topic_text'>{{countdownTxt}}</text>
						<image src="@/static/study/fillIn.png" class='topic_img' alt=""></image>
							<text
								class='topic_text'>{{textType == 1 ? singleNum+'/'+singleChoice :textType==2?multipleNum+'/'+multipleChoice:estimate+'/'+estimateChoice  }}</text>
				</text>
			</view>
			<view class="topic_title">
				<text class="topic_title_text" style="margin:10px 0 20px 0 ">{{questionStem}}</text>
				<!-- 单选 -->
				<u-radio-group v-model="radiovalue" placement="column" size='20' :disabled="this.options.name==3"
					v-if="textType==1" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name='item.noName' labelSize='16' style='margin:13px 0;'>
					</u-radio>
				</u-radio-group>
				<!-- 多选 -->
				<u-checkbox-group v-model="checkboxValue" placement="column" size='20' :disabled="this.options.name==3"
					v-else-if="textType==2" @change="groupChange">
					<u-checkbox :customStyle="{marginBottom: '15px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.noName" labelSize='16'>{{
							item.name
						}}
					</u-checkbox>
				</u-checkbox-group>
				<!-- 判断-->
				<u-radio-group v-model="judgmentvalue" placement="column" size='20' :disabled="this.options.name==3"
					v-else @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name='item.noName' labelSize='16' style='margin:13px 0;'>
					</u-radio>
				</u-radio-group>
				<view class="topic_title_answer" v-if="this.options.name==3">
					<text class="topic_title_answer_reference">参考答案：{{answer}}</text>
					<text class="topic_title_answer_reference">{{answerParse}}</text>
				</view>
			</view>
		</view>
		<view class="topic_next">
			<view class="topic_next_up" @click="nextClick(1)">
				<image src="@/static/study/next.png" alt="" class='topic_next_img'></image>
					上一页
			</view>
			<view class="topic_next_up" @click="nextClick(2)" v-if="nextPage">
				<image src="@/static/study/next.png" alt="" class='topic_next_img'></image>
					下一页
			</view>
			<view class="topic_next_up" @click="()=>{show=true}" v-else-if="options.name!=3">
				<image src="@/static/study/next.png" alt="" class='topic_next_img'></image>
					提交
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" @confirm="confirm" @cancel='()=>{show=false}' :content='content' ref="uModal"
			:asyncClose="true" showCancelButton asyncClose></u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {},
				// 单选
				radiovalue: "",
				// 确认提示
				show: false,
				// 多选
				checkboxValue: [],
				// 判断
				judgmentvalue: "",
				// 步骤 0:单选 1:多选 2:判断
				cuNum: 0,
				// 选项
				radiolist: [],
				// 题干
				questionStem: '',
				//单选题目总数
				singleChoice: '',
				// 单选第几题
				singleNum: 1,
				//多选题目总数
				multipleChoice: '',
				// 多选第几题
				multipleNum: 0,
				//判断题目总数
				estimateChoice: "",
				// 判断 第几题
				estimate: 0,
				// 判断
				// judgmentlist: [],
				// 倒计时
				countdownTxt: '',
				// 答案解析
				answerParse: '',
				// 答案
				answer: "",

				viewResultsList: {},

				nextPage: true,

				content: '确认要交卷吗？',
				// 单选暂存答案
				userSel: [],
				// 多选暂存答案
				multipleUser: [],
				// 判断暂存答案
				estimateUser: [],
				// tab
				topicList: [],
				// 当前试题类型：1 单选 2 多选 3 判断
				textType: '',
				//试题总题输 
				// sumData: '',

				currentTopic: 1

			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// console.log(option); //打印出上个页面传递的参数。
			this.options = option;
		},
		mounted() {
			this.search()
			this.userSel = []
			this.multipleUser = []
			this.estimateUser = []
			this.currentTopic = 1
		},
		methods: {
			// 查询
			search(key) {
				// this.checkboxValue = []
				if (this.options.name == 1) {
					this.$api.beganChallenge({
						"classId": this.options.classId, //考试id
						"examPaperId": this.options.examPaperId, //试卷id
						"examRecordId": this.options.examRecordId //考试记录
					}).then(res => {
						this.viewResultsList = res.data.data

						if (res.data.data.examPaperVO.radioItems.length) {
							this.topicList.push({
								title: "单选题",
								current: this.singleNum,
								sum: res.data.data.examPaperVO.radioCount,
								minData: 1,
								maxData: res.data.data.examPaperVO.radioCount
							})
							this.textType = 1
						}

						if (res.data.data.examPaperVO.multiItems.length) {
							this.topicList.push({
								title: "多选题",
								current: this.multipleNum,
								sum: res.data.data.examPaperVO.multiCount,
								minData: res.data.data.examPaperVO.radioCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount
							})
							if (!this.textType) {
								this.textType = 2
							}
						}

						if (res.data.data.examPaperVO.judgmentItems.length) {
							this.topicList.push({
								title: "判断题",
								current: this.estimate,
								sum: res.data.data.examPaperVO.judgmentCount,
								minData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + res.data.data.examPaperVO.judgmentCount
							})
							if (!this.textType) {
								this.textType = 3
							}
						}

						// 考试时间
						if (key !== 1) {
							this.countdownTxt = this.countdownFun(this.viewResultsList.examPaperVO
								.examTime * 60)
						}

						this.subjectGenerated()

					})

				} else if (this.options.name == 3) {
					this.$api.viewResults({
						"examPaperId": this.options.examPaperId, //试卷id
						"examRecordId": this.options.examRecordId //考试记录
					}).then(res => {

						this.viewResultsList = res.data.data

						if (res.data.data.examPaperVO.radioItems.length) {
							this.topicList.push({
								title: "单选题",
								current: this.singleNum,
								sum: res.data.data.examPaperVO.radioCount,
								minData: 1,
								maxData: res.data.data.examPaperVO.radioCount
							})
							this.textType = 1
						}

						if (res.data.data.examPaperVO.multiItems.length) {
							this.topicList.push({
								title: "多选题",
								current: this.multipleNum,
								sum: res.data.data.examPaperVO.multiCount,
								minData: res.data.data.examPaperVO.radioCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount
							})
							if (!this.textType) {
								this.textType = 2
							}
						}

						if (res.data.data.examPaperVO.judgmentItems.length) {
							this.topicList.push({
								title: "判断题",
								current: this.estimate,
								sum: res.data.data.examPaperVO.judgmentCount,
								minData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + res.data.data.examPaperVO.judgmentCount
							})
							if (!this.textType) {
								this.textType = 3
							}
						}

						if (key !== 1) {
							// 考试时间
							this.countdownTxt = this.viewResultsList.examPaperVO.examTime
						}
						this.subjectGenerated()
					})
				} else {
					this.$api.queryTest({
						"classId": this.options.classId,
						"examPaperId": this.options.examPaperId,
						"examRecordId": this.options.examRecordId
					}).then(res => {
						this.viewResultsList = res.data.data
						if (res.data.data.examPaperVO.radioItems.length) {
							this.topicList.push({
								title: "单选题",
								current: this.singleNum,
								sum: res.data.data.examPaperVO.radioCount,
								minData: 1,
								maxData: res.data.data.examPaperVO.radioCount
							})
							this.textType = 1
						}

						if (res.data.data.examPaperVO.multiItems.length) {
							this.topicList.push({
								title: "多选题",
								current: this.multipleNum,
								sum: res.data.data.examPaperVO.multiCount,
								minData: res.data.data.examPaperVO.radioCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount
							})
							if (!this.textType) {
								this.textType = 2
							}
						}

						if (res.data.data.examPaperVO.judgmentItems.length) {
							this.topicList.push({
								title: "判断题",
								current: this.estimate,
								sum: res.data.data.examPaperVO.judgmentCount,
								minData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + 1,
								maxData: res.data.data.examPaperVO.radioCount + res.data.data.examPaperVO
									.multiCount + res.data.data.examPaperVO.judgmentCount
							})
							if (!this.textType) {
								this.textType = 3
							}
						}
						// topicList
						if (key !== 1) {
							// 考试时间
							this.countdownTxt = this.countdownFun(this.viewResultsList.examPaperVO
								.examTime * 60)
						}
						this.subjectGenerated()
					})
				}

			},

			// 保存考试进度
			groupChange(n) {
				if (this.countdownTxt == '00分00秒') {
					uni.showToast({
						title: '答题时间到！',
						icon: 'none',
						duration: 1000
					})
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/on-line-study/index'
						})
					}, 1100);
					return
				}
				// userSel
				this.$api.saveTest({
					"examRecordId": this.options.name == 2 ? this.viewResultsList.examRecordId : this
						.options
						.examRecordId,
					"examPaperItemId": this.textType == 1 ? this.viewResultsList.examPaperVO.radioItems[this
							.singleNum - 1].paperOpts[0]?.examPaperItemId : this.textType == 2 ? this
						.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].paperOpts[0]
						?.examPaperItemId : this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1]
						.paperOpts[0]?.examPaperItemId,
					"option": n instanceof Array ? n.join() : n,
					"examRecordItemId": this.textType == 1 ? this.userSel[this.singleNum - 1]?.id : this
						.textType == 2 ? this.multipleUser[
							this.multipleNum - 1]?.id : this.estimateUser[this.estimate - 1]?.id
				}).then(rst => {
					if (this.textType == 1) {
						// 单选
						this.userSel[this.singleNum - 1] = {
							name: n,
							id: rst.data.data
						}
					} else if (this.textType == 2) {
						//复选框
						this.multipleUser[this.multipleNum - 1] = {
							name: n,
							id: rst.data.data
						}
					} else {
						//判断
						this.estimateUser[this.estimate - 1] = {
							name: n,
							id: rst.data.data
						}
					}

				})
			},

			//提交
			confirm() {
				if (this.countdownTxt == '00分00秒') {
					uni.showToast({
						title: '答题时间到！',
						icon: 'none',
						duration: 1000
					})
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/on-line-study/index'
						})
					}, 1100);
					return
				}
				this.$api.carryTest({
					"examRecordId": this.options.name == 2 ? this.viewResultsList.examRecordId : this
						.options
						.examRecordId,
					"examPaperId": this.options.examPaperId
				}).then(res => {
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							type: 'success',
							message: "提交成功！",
						})
						this.show = false
						setTimeout(() => {
							this.$goBack(1, 1)
						}, 1500);
					}
				})
			},

			// 题目自动生成
			subjectGenerated() {
				// 单选题总题
				this.singleChoice = this.viewResultsList.examPaperVO.radioCount
				// 多选
				this.multipleChoice = this.viewResultsList.examPaperVO.multiCount
				// 判断
				this.estimateChoice = this.viewResultsList.examPaperVO.judgmentCount
				// 单选
				if (this.textType == 1) {
					this.questionStem = this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1]
						.questionStem
					// 参考答案
					this.answer = this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].answer
					// 答案
					this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].paperOpts.map(item => {

						this.radiolist.push({
							name: item.optionsNo + '：' + item.optionsDesc,
							noName: item.optionsNo
						})
					})
					// 答案回显
					// this.radiovalue = this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].selected

					if (this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].selected) {
						this.radiovalue = this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].selected
					} else {
						this.radiovalue = this.userSel[this.singleNum - 1]?.name
					}

					// 答案解析
					this.answerParse = this.viewResultsList.examPaperVO.radioItems[this.singleNum - 1].analysis


				} else if (this.textType == 2) {
					this.questionStem = this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1]
						.questionStem

					// 参考答案
					this.answer = this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].answer
					// 答案
					this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].paperOpts.map(item => {

						this.radiolist.push({
							name: item.optionsNo + '：' + item.optionsDesc,
							noName: item.optionsNo
						})
					})
					// 答案回显
					// multipleUser
					// this.checkboxValue = this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].selected
					// 	.split(",")

					if (this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].selected) {
						this.checkboxValue = this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].selected
							.split(
								",")
					} else {
						this.checkboxValue = this.multipleUser[this.multipleNum - 1]?.name
					}

					// console.log(1312, this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].selected)
					// 答案解析
					this.answerParse = this.viewResultsList.examPaperVO.multiItems[this.multipleNum - 1].analysis
				} else {
					this.questionStem = this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1]
						.questionStem

					// 参考答案
					this.answer = this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].answer
					// 答案
					this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].paperOpts.map(item => {

						this.radiolist.push({
							name: item.optionsNo + '：' + item.optionsDesc,
							noName: item.optionsNo
						})
					})
					// 答案回显
					// estimateUser
					// this.judgmentvalue = this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].selected
					// 	.split(",")

					if (this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].selected) {
						this.judgmentvalue = this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].selected
					} else {
						this.judgmentvalue = this.estimateUser[this.estimate - 1]?.name
					}

					// console.log(1312, this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].selected)
					// 答案解析
					this.answerParse = this.viewResultsList.examPaperVO.judgmentItems[this.estimate - 1].analysis
				}
			},

			// 上一页/下一页
			nextClick(item) {
				let a = 0
				// 上一页
				if (item == 1) {
					this.radiolist = []
					this.nextPage = true
					if (this.currentTopic > 1) {
						this.currentTopic--
					}
					// 判断当前题目类型
					this.topicList.map(item => {
						if (this.currentTopic >= item.minData && this.currentTopic <= item.maxData) {
							if (item.title == '单选题') {
								this.textType = 1
							}
							if (item.title == '多选题') {
								this.textType = 2
							}
							if (item.title == '判断题') {
								this.textType = 3
							}
						}
					})
					if (this.cuNum == 0) {
						if (this.singleNum == 1) {
							this.$refs.uToast.show({
								type: 'error',
								message: "没有上一题了！",
							})
						} else {
							this.singleNum--
						}
					} else if (this.cuNum == 2) {
						if (this.estimate == 1) {
							this.cuNum = 1
							this.estimate = 0
						} else {
							this.estimate--
						}
					} else {
						if (this.multipleNum == 1) {
							this.cuNum = 0
							this.multipleNum = 0
						} else {
							this.multipleNum--
						}
					}
					this.subjectGenerated()

				} else {
					this.radiolist = []
					this.currentTopic++
					// 判断当前题目类型
					this.topicList.map(item => {
						if (this.currentTopic >= item.minData && this.currentTopic <= item.maxData) {
							if (item.title == '单选题') {
								this.textType = 1
							}
							if (item.title == '多选题') {
								this.textType = 2
							}
							if (item.title == '判断题') {
								this.textType = 3
							}
						}
					})
					// 下一页
					if (this.textType == 1) {
						this.singleNum += 1
						if (this.singleNum == this.singleChoice && !this.multipleChoice) {
							this.nextPage = false
						}
					} else if (this.textType == 2) {
						this.cuNum = 1
						this.multipleNum += 1
						if (this.multipleNum == this.multipleChoice && !this.estimateChoice) {
							this.nextPage = false
						}
					} else {
						this.cuNum = 2
						this.estimate += 1
						if (this.estimate == this.estimateChoice) {
							this.nextPage = false
						}
					}
					this.subjectGenerated()
				}
			},

			// 倒计时
			countdownFun(diffTime) {
				if (diffTime > 0) {
					this.countdownTime = setInterval(() => {
						let diffM =
							Math.floor(diffTime / 60) > 9 ?
							Math.floor(diffTime / 60) :
							`0${Math.floor(diffTime / 60)}`;
						let diffS =
							Math.floor(diffTime % 60) > 9 ?
							Math.floor(diffTime % 60) :
							`0${Math.floor(diffTime % 60)}`;
						this.countdownTxt = `${diffM}分${diffS}秒`;
						diffTime--;
						if (diffTime < 0) {
							clearInterval(this.countdownTime);
							return;
						}
					}, 1000);
				}

			}
		},
	}
</script>

<style lang="scss" scoped>
	.step {
		padding: 15px;
		border-bottom: 1px #D9D9D9 solid;
	}

	.topic {
		padding: 15px;

		// 标题
		.topic_right {
			float: right;

			.topic_img {
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
			}

			.topic_text {
				color: #F47435;
				margin: 0 8px;
			}
		}

		// 题目
		.topic_title {
			padding: 10px;

			.topic_title_text {
				display: block;
			}

			.topic_title_answer {
				margin: 20px 0 0 0;

				.topic_title_answer_reference {
					display: block;
					margin: 15px 0;
				}
			}
		}
	}

	// 下一页
	.topic_next {
		width: 100%;
		position: absolute;
		bottom: 0;
		padding: 15px;
		border-top: 1px #D9D9D9 solid;

		.topic_next_up {
			text-align: center;
			width: 45%;
			display: inline-block;
			font-size: 35rpx;

		}

		.topic_next_img {
			width: 35rpx;
			height: 35rpx;
			vertical-align: middle;
			margin: 0 8px;
		}

	}



	// 提交
	.submit {
		border: 1px red solid;
		padding: 15px;
		text-align: center;
		// font-size: 40rpx;
		position: absolute;
		bottom: 0;

		.topic_next_img {
			width: 35rpx;
			height: 35rpx;
			vertical-align: middle;
			margin: 0 8px;
		}
	}
</style>